<template>
  <div class="top-card-container">
    <el-row :gutter="10">
      <el-col :span="6">
        <el-card>
          <top-card title="总销售额" content="¥ 126560">
            <template #chart>
              <span
                >周同比&nbsp;
                <countTo v-bind="countOptions"></countTo>
                % &nbsp;<svg width="8px" height="8px">
                  <polygon
                    points="0,6, 8,6, 4,0"
                    style="fill: #ec5c97; stroke: #ec5c97; stroke-width: 1"
                  /></svg
              ></span>
              <span style="margin-left: 5%"
                >日同比&nbsp;19,16% &nbsp;<svg width="8px" height="8px">
                  <polygon
                    points="0,0 8,0 4,6"
                    style="fill: #25cc41; stroke: #25cc41; stroke-width: 1"
                  /></svg
              ></span>
            </template>
            <template #footer>
              <span>日销售额</span>
            </template>
          </top-card>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <top-card title="访问量" content="88460">
            <template #chart>
              <div ref="assetsChart" class="assets-chart" />
            </template>
            <template #footer>
              <span>日访问量1234</span>
            </template>
          </top-card>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <top-card title="支付笔数" content="88460">
            <template #chart>
              <div ref="payChart" class="pay-cahrt" />
            </template>
            <template #footer>
              <span>转化率65%</span>
            </template>
          </top-card>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <top-card title="运营活动效果" content="78%">
            <template #chart>
              <el-progress
                :text-inside="true"
                :stroke-width="26"
                :percentage="78"
              />
            </template>
            <template #footer>
              <div class="percent">
                <span
                  >周同比&nbsp;56.67% &nbsp;<svg width="8px" height="8px">
                    <polygon
                      points="0,6, 8,6, 4,0"
                      style="fill: #ec5c97; stroke: #ec5c97; stroke-width: 1;"
                    /></svg
                ></span>
                <span style="margin-left: 5%"
                  >日同比&nbsp;19,16% &nbsp;<svg width="8px" height="8px">
                    <polygon
                      points="0,0 8,0 4,6"
                      style="fill: #25cc41; stroke: #25cc41; stroke-width: 1"
                    /></svg
                ></span>
              </div>
            </template>
          </top-card> </el-card
      ></el-col>
    </el-row>
  </div>
</template>

<script>
import TopCard from './TopCard'
import countTo from 'vue-count-to'
export default {
  name: 'Top',
  components: {
    TopCard,
    countTo
  },
  props: {},
  data () {
    return {
      countOptions: {
        startVal: 0,
        endVal: 56.67,
        decimals: 2,
        useEasing: true,
        separator: ',',
        duration: 1800
      }
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {
    this.initAccessChart()
    this.initPayChart()
  },
  methods: {
    initAccessChart () {
      const chart = this.$echarts.init(this.$refs.assetsChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          show: false
        },
        yAxis: {
          type: 'value',
          show: false
        },
        grid: {
          left: 0,
          right: 0,
          top: 0,
          bottom: '10%'
        },
        series: [
          {
            data: [100, 50, 200, 100, 200, 90, 170, 250, 300],
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              color: '#b39be7'
            },
            areaStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#a390c5' },
                { offset: 1, color: '#ffffff' }
              ])
            }
          }
        ]
      }
      chart.setOption(option)
    },
    initPayChart () {
      const option = {
        series: [
          {
            type: 'liquidFill',
            radius: '98%',
            center: ['50%', '50%'],
            data: [0.5, 0.5, 0.5], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1
            },
            // 修改波浪颜色
            // color:['yellow'], 所有波浪一个颜色
            // color:['yellow','red','pink'], 每个波浪不同颜色，颜色数组长度为对应的波浪个数
            label: {
              normal: {
                formatter: (0.65 * 100).toFixed(2) + '%',
                textStyle: {
                  fontSize: 10
                }
              }
            },
            outline: {
              show: false
            }
          },
          {
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['98%', '100%'],
            hoverAnimation: false,
            data: [
              {
                name: '',
                value: 500,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#5886f0'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#5886f0'
                  }
                }
              },
              {
                // 画中间的图标
                name: '',
                value: 4,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#ffffff',
                  normal: {
                    color: '#5886f0',
                    borderColor: '#5886f0',
                    borderWidth: 10
                    // borderRadius: '100%'
                  }
                },
                label: {
                  borderRadius: '100%'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#5886f0'
                  }
                }
              },
              {
                // 解决圆点过大后续部分显示明显的问题
                name: '',
                value: 4,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: '#5886f0'
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: '#5886f0'
                  }
                }
              },
              {
                // 画剩余的刻度圆环
                name: '',
                value: 88,
                itemStyle: {
                  color: '#050038'
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: 'rgba(255,255,255,0)'
                  }
                }
              }
            ]
          }
        ]
      }
      const chart = this.$echarts.init(this.$refs.payChart)
      chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="less">
.assets-chart {
  width: 100%;
  height: 100%;
}
.pay-cahrt {
  width: 100%;
  height: 100%;
}
.percent {
  display: flex;
  align-items: center;
  & > span {
    display: flex;
    align-items: center;
  }
}
</style>
